<template>
    <div>
        <ul class="list-wrap">
            <li v-for="(item,index) in list" :key = "index" :style = "item.bg_posi" @click="tabs(item.id,index)">
                <h2>{{item.app}}</h2>
                <p>{{item.title}}</p>
                
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'WorkspaceJsonEntrytitle',

    data() {
        return {
            list:[
                {
                    "id":1,
                    "app":'自由行',
                    "title":"旅行就要更自在",
                    "bg_posi": 'background-position: 66px -628px'
                },
                {
                    "id":2,
                    "app":'跟团游',
                    "title":"行程透明省心游",
                    "bg_posi": 'background-position: 66px -24px'
                },
                {
                    "id":3,
                    "app":'当地游',
                    "title":"最地道的玩法体验",
                    "bg_posi": 'background-position: 66px -124px'
                },
                {
                    "id":4,
                    "app":'机票',
                    "title":"特惠一折起",
                    "bg_posi": 'background-position: 66px -224px'
                },
                {
                    "id":5,
                    "app":'订酒店',
                    "title":"一键全网比价",
                    "bg_posi": 'background-position: 66px -324px'
                },
                {
                    "id":6,
                    "app":'签证',
                    "title":"出签率高服务佳",
                    "bg_posi": 'background-position: 66px -424px'
                },
                {
                    "id":7,
                    "app":'看演出',
                    "title":"追星天地",
                    "bg_posi": 'background-position: 66px -524px'
                }
            ]
        };
    },

    mounted() {
        
    },

    methods: {
        tabs(id){
            if(id==1){
                this.$router.push({path:'/community?mid=10'})
            }else if(id==2){
                this.$router.push({path:'/community?mid=20'})
            }else if(id==3){
                this.$router.push({path:'/community?mid=30'})
            }else if(id==4){
                this.$router.push({path:'/ticket'})
            }else if(id==5){
                this.$router.push({path:'/hotel'})
            }else if(id==6){
                this.$router.push({path:'/ticket/detail?mid=1&address=北京'})
            }else if(id==7){
                this.$router.push({path:'/show/recom'})
            }
        }
        
    },
};
</script>

<style lang="scss" scoped>
.list-wrap{
    list-style: none;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    li{
        width: 126px;
        height: 46px;
        font-size: 12px;
        padding: 5px;
        border: 1px solid #e5e5e5;
        cursor: pointer;
        background: url('../../../assets/home_detail_icon/entryTitle_icon.png') no-repeat ;
        background-size: 100px;
        h2 {
            font-weight: 400;
        }
        p {
            color: #9d9d9d;
        }
        &:hover {
            h2 {
                color: #41c1ec;
            }
        }
    }
}
</style>